$baseFontSize: 40px !default;
$red: #D71345 !default;
$opacity: 1 !default;
@function rem($px) {
  @return $px / $baseFontSize * 1rem;
}

@mixin displayflex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

@mixin flex($size:1) {
  -webkit-box-flex: $size;
  -moz-box-flex: $size;
  -webkit-flex: $size;
  -ms-flex: $size;
  flex: $size;
}

@mixin flexflowCol($direction:column,$dir:vertical) {
  -webkit-box-orient: $dir;
  -ms-box-orient: $dir;
  -moz-box-orient: $dir;
  -webkit-flex-flow: $direction nowrap;
  -ms-flex-flow: $direction nowrap;
  -moz-flex-flow: $direction nowrap;
  flex-flow: $direction nowrap;
}

@mixin flexflowRow($direction:row,$dir:horizontal) {
  -webkit-box-orient: $dir;
  -ms-box-orient: $dir;
  -moz-box-orient: $dir;
  -webkit-flex-flow: $direction nowrap;
  -ms-flex-flow: $direction nowrap;
  -moz-flex-flow: $direction nowrap;
  flex-flow: $direction nowrap;
}

@mixin shadow($x:0,$y:0px,$z:5px,$color:#bdbdbd) {
  box-shadow: $x $y $z $color;
  -webkit-box-shadow: $x $y $z $color;
  -moz-box-shadow: $x $y $z $color;
}

@mixin border-radius($radius:4px) {
  -webkit-border-radius: rem($radius);
  -moz-border-radius: rem($radius);
  -ms-border-radius: rem($radius);
  -o-border-radius: rem($radius);
  border-radius: rem($radius);
}

@mixin box-sizing($set:border-box) {
  -webkit-box-sizing: $set;
  -moz-box-sizing: $set;
  -ms-box-sizing: $set;
  -o-box-sizing: $set;
  box-sizing: $set;
}

* {
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  font-family: Helvetica, sans-serif;
  -webkit-touch-callout: none;
  box-sizing: border-box;
}

a:active, a:hover, a:link, a:visited {
  text-decoration: none;
  outline: none;
}

html, body {
  width: 100%;
  height: 100%;
  font-size: 20px;
  background-color: #76e8ff;
  position: relative;
}

html {
  font-size: 20px;
}

body {
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

img {
  display: block;
  width: 100%;
}

* {
  @include box-sizing(border-box);
  outline: none;
}

.header {
  img {
    display: block;
    width: 100%;
    min-height: rem(270px);
  }
}

.content {
  padding: 0 rem(26px);
  .nav {
    .topBar {
      width: 100%;
      height: rem(30px);
      background-color: #ec2735;
      padding: 0 rem(16px);
      @include displayflex;
      @include flexflowRow;
      .bar {
        @include flex;
        margin-right: rem(10px);
        position: relative;
        &:last-child {
          margin-right: 0;
        }
        &:before {
          content: '';
          display: inline-block;
          border-left: rem(10px) solid transparent;
          border-right: rem(10px) solid transparent;
          border-top: rem(16px) solid #d01c1f;
          position: absolute;
          top: 50%;
          left: 50%;
          margin-top: rem(-8px);
          margin-left: rem(-10px);
        }
      }
      .bar.selected {
        background-color: #ff7b75;
        &:before {
          content: '';
          display: inline-block;
          border-left: rem(10px) solid transparent;
          border-right: rem(10px) solid transparent;
          border-top: rem(16px) solid #ffff00;
          position: absolute;
          top: 50%;
          left: 50%;
          margin-top: rem(-8px);
          margin-left: rem(-10px);
        }
      }
    }
    .tabs {
      width: 100%;
      padding: 0 rem(16px) rem(15px);
      background-color: #074289;
      @include displayflex;
      @include flexflowRow;
      .tab {
        @include flex;
        margin-right: rem(12px);
        padding: rem(10px) 0 rem(26px);
        text-align: center;
        color: #747474;
        font-weight: bold;
        position: relative;
        background-color: #a09e9c;
        &:last-child {
          margin-right: 0;
        }
        &:before {
          content: '';
          display: block;
          border-top: rem(12px) solid #5ac1d7;
          border-right: rem(12px) solid #5ac1d7;
          border-left: rem(12px) solid #074289;
          border-bottom: rem(12px) solid #074289;
          position: absolute;
          bottom: 0;
          left: 0;
        }
        .date {
          font-size: rem(32px);
          line-height: rem(32px);
        }
        .day {
          font-size: rem(64px);
          line-height: rem(64px);
        }
        .time {
          font-size: rem(24px);
        }
      }
      .tab.selected {
        background-color: #fff;
        color: #333333;
        &:before {
          content: '';
          display: block;
          border-top: rem(12px) solid #74e7ff;
          border-right: rem(12px) solid #74e7ff;
          border-left: rem(12px) solid #074289;
          border-bottom: rem(12px) solid #074289;
          position: absolute;
          bottom: 0;
          left: 0;
        }
        .day {
          color: #ff0012;
        }
      }
    }
  }
  .panels {
    .panel {
      display: none;
      &.selected {
        display: block;
      }
      .nines {
        padding: rem(15px) rem(16px);
        overflow: hidden;
        -webkit-border-radius: 0 0 rem(8px) rem(8px);
        -moz-border-radius: 0 0 rem(8px) rem(8px);
        -ms-border-radius: 0 0 rem(8px) rem(8px);
        -o-border-radius: 0 0 rem(8px) rem(8px);
        border-radius: 0 0 rem(8px) rem(8px);
        background-color: #3178a7;
        margin-bottom: rem(14px);
        .nine {
          overflow: hidden;
          @include border-radius(8px);
          border-radius: rem(8px);
          font-size: 0;
          margin-bottom: rem(15px);
          position: relative;
          &:last-child {
            margin-bottom: 0;
          }
          &.sellout:before{
            content: '';
            display: block;
            width: rem(104px);
            height: rem(46px);
            background: url(/old/images/YN9/sellout_icon@2x.png) no-repeat center;
            background-size: 100%;
            position: absolute;
            top: 0;
            left: 0;
          }
          img {
            width: 100%;
            min-height: rem(250px);
            vertical-align: top;
          }
          .overlay {
            position: absolute;
            width: 100%;
            height: rem(116.94px);
            right: 0;
            left: 0;
            bottom: 0;
            background: url(/old/images/YN9/nine@2x.png) no-repeat center;
            background-size: 100%;
            .old-price {
              height: rem(45px);
              line-height: rem(45px);
              font-size: rem(24px);
              margin-top: rem(24px);
              color: #ec222c;
              text-align: right;
              padding-right: rem(114px);
              font-weight: bold;
            }
            .name {
              height: rem(48px);
              line-height: rem(48px);
              font-size: rem(24px);
              font-weight: bold;
              color: #fff;
              padding: 0 rem(10px);
            }
          }
        }
      }
      .hot-title {
        width: 100%;
        height: rem(63.94px);
        text-indent: -9999px;
        font-size: rem(24px);
        color: #fff;
        background: url(/old/images/YN9/hot-title@2x.png) no-repeat center;
        background-size: 100%;
        margin-bottom: rem(14px);
      }
      .hots {
        padding: 0 rem(10px);
        margin-bottom: rem(28px);
        .row {
          @include displayflex;
          @include flexflowRow;
          margin-bottom: rem(16px);
          .hot {
            position: relative;
            @include flex;
            background-color: #fff;
            padding: rem(10px) rem(12px);
            @include border-radius(10px);
            box-shadow: rem(10px) rem(10px) rem(16px) rgba(0, 0, 0, .1);
            -webkit-box-shadow: rem(10px) rem(10px) rem(16px) rgba(0, 0, 0, .1);
            -moz-box-shadow: rem(10px) rem(10px) rem(16px) rgba(0, 0, 0, .1);
            &:last-child {
              margin-left: rem(20px);
            }
            &:before {
              content: '';
              display: block;
              width: rem(70px);
              height: rem(40px);
              background: url(/old/images/YN9/hot_icon@2x.png) no-repeat center;
              background-size: 100%;
              position: absolute;
              left: rem(12px);
              top: rem(10px);
            }
            &.spec {
              margin-left: 0;
              img {
                margin-bottom: 0;
              }
              .info {
                @include displayflex;
                @include flexflowRow;
                margin-top: rem(10px);
                .name {
                  @include flex;
                  height: rem(53px);
                  min-height: rem(53px);
                  line-height: rem(33px);
                  padding: rem(10px);
                  font-size: rem(24px);
                  color: #333333;
                  white-space: nowrap;
                  margin-bottom: 0;
                  font-weight: bold;
                }
                img {
                  display: block;
                  width: rem(150px);
                  height: rem(53px);
                  margin-left: rem(-20px);
                }
              }
            }
            img {
              width: 100%;
              height: rem(224.46px);
              @include border-radius(8px);
              margin-bottom: rem(6px);
            }
            .name {
              min-height: rem(110px);
              font-size: rem(24px);
              line-height: rem(30px);
              color: #ff3c51;
              font-weight: bold;
              padding: rem(10px);
              background-color: #fff7d0;
              margin-bottom: rem(4px);
              @include border-radius(8px);
            }
            .info {
              @include displayflex;
              @include flexflowRow;
              -ms-justify-content: center;
              -webkit-justify-content: center;
              justify-content: center;
              -ms-justify: center;
              -webkit-justify: center;
              justify: center;
              -ms-box-align: center;
              -webkit-box-align: center;
              box-align: center;
              -ms-align-items: center;
              -webkit-align-items: center;
              align-items: center;
              .price {
                @include flex;
                color: #ff3c51;
                font-size: rem(24px);
                span {
                  font-size: rem(32px);
                  font-weight: bold;
                }
              }
              a {
                width: rem(132px);
                height: rem(44px);
                line-height: rem(44px);
                display: block;
                background-color: #ff3c51;
                text-align: center;
                font-size: rem(24px);
                font-weight: bold;
                color: #fff;
                @include border-radius(8px);
              }
            }
          }
        }
      }
      .recommend-title {
        width: 100%;
        height: rem(64px);
        text-indent: -9999px;
        font-size: rem(24px);
        color: #fff;
        background: url(/old/images/YN9/recommend-title@2x.png) no-repeat center;
        background-size: 100%;
        margin-bottom: rem(8px);
      }
      .recommends {
        padding: rem(28px) rem(20px);
        background-color: #fff;
        -webkit-border-radius: 0 0 rem(8px) rem(8px);
        -moz-border-radius: 0 0 rem(8px) rem(8px);
        -ms-border-radius: 0 0 rem(8px) rem(8px);
        -o-border-radius: 0 0 rem(8px) rem(8px);
        border-radius: 0 0 rem(8px) rem(8px);
        a.recommend {
          display: block;
          background-color: #fff7d0;
          font-size: rem(24px);
          line-height: rem(34px);
          color: #333;
          font-weight: bold;
          padding: rem(16px) rem(16px);
          margin-bottom: rem(22px);
          @include border-radius(8px);
          &:last-child {
            margin-bottom: 0;
          }
          span {
            color: #ff3c51;
          }
        }
      }
    }
  }
}

.footer {
  padding: rem(22px) rem(26px);
  a.buy {
    display: block;
    width: 100%;
    min-height: rem(94.5px);
    background: url(/old/images/YN9/buy_icon@2x.png) no-repeat center;
    background-size: 100%;
    font-size: rem(24px);
    color: #fff;
    text-align: center;
    text-indent: -9999px;
    margin-bottom: rem(28px);
  }
  .rule-title {
    padding: 0 rem(20px);
    min-height: rem(55.84px);
    margin-bottom: rem(20px);
  }
  .rules {
    list-style:none;
    background-color: #fff;
    padding: rem(26px) rem(22px) rem(30px) rem(20px);
    @include border-radius(8px);
    li{
      font-size: rem(24px);
      line-height: rem(30px);
      color: #333;
      padding-bottom: rem(10px);
      &:last-child{
        padding-bottom: 0;
      }
    }
  }
}